<template>
  <div>
    <div class="activity-detail">
      <div class="card-item">
        <div class="card-header">
          <img :src="info.bank_img">
          <span class="title">{{info.name}}</span>
        </div>
        <div class="card-content">
          <div class="desc">({{info.begin_date}} - {{info.end_date}})</div>
          <div class="hint">{{info.brief_introduction}}</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="details">
        <div class="title">参加条件</div>
        <div class="content" v-html="info.attend_info"></div>
      </div>
      <div class="line"></div>
      <div class="details">
        <div class="title">活动详情</div>
        <div class="content" ref="detail" v-html="info.introduction"></div>
        <div class="looking-more" @click="showContent">
          <span class="text">查看更多</span>
          <img src="/src/assets/icons/arrow-down.png" class="icon">
        </div>
      </div>
      <div class="line"></div>
      <div class="details">
        <div class="title">
          卡神点评
          <div class="stars">
            <img :src="`/src/assets/icons/star-${v <= info.star ? 'y' : 'g'}.png`" alt="star" v-for="v in 5" :key="v">
          </div>
        </div>
        <div class="content" v-html="info.comment_info"></div>
      </div>
      <div class="line"></div>
      <div class="gray-hint">此活动经由“小惠”精心收录，如有错误，欢迎卡友们指正！</div>
      <mt-button type="default" :plain="true" class="dispute" @click.native="showCorrection">我要纠错</mt-button>
      <correction ref="correction"></correction>
      <!-- <div class="ac-area" @click="routerToComment">
        <div class="section">
          <span class="top">活动交流专区</span>
          <span class="bottom">火热进行中({{commentCount}})</span>
        </div>
        <img src="/src/assets/icons/go-right.png" alt="go" class="go-right">
      </div>
      <div class="comment" v-for="c in comments" :key="c.user_name">
        <div class="head-img">
          <img :src="c.headimgurl">
        </div>
        <div class="comment-detail">
          <div class="user-name">
            {{c.user_name}}
            <span class="date-time">{{c.add_time}}</span>
          </div>
          <div class="detail">{{c.content}}</div>
        </div>
      </div> -->
      <footer class="btn-bottom" :class="{'no-collect': !info.if_attention, 'collect': info.if_attention}">
        <mt-button plain @click.native="addManage">
          <img src="/src/assets/icons/heart-red.png" alt="收藏" slot="icon">
          收藏
        </mt-button>
        <mt-button @click.native="removeManage">
          <img src="/src/assets/icons/heart-white.png" alt="取消收藏" slot="icon">
          取消
        </mt-button>
        <mt-button @click.native="showPopup">进度管理</mt-button>
        <mt-button plain>移出删除</mt-button>
        <img src="/src/assets/icons/trash.png" alt="移除" class="trash">
      </footer>
      <mt-popup v-model="popupVisible" position="right" class="update-proceed-info">
        <div class="header">更新进度</div>
        <div class="cell" v-if="proceed.in_cyc_already_posed">
          <div class="cell-text">{{proceed.in_cyc_already_posed.name}}：</div>
          <div class="cell-item input">
            <img src="/src/assets/icons/minus.png" @click="minus('in_cyc_already_posed')">
            <input type="text" :maxlength="proceed.in_cyc_already_posed.max_length" v-model="in_cyc_already_posed">
            <img src="/src/assets/icons/plus.png" @click="plus('in_cyc_already_posed')">
          </div>
        </div>
        <div class="cell" v-if="proceed.cycs_already_posed">
          <div class="cell-text">{{proceed.cycs_already_posed.name}}：</div>
          <div class="cell-item input">
            <img src="/src/assets/icons/minus.png" @click="minus('cycs_already_posed')">
            <input type="text" :maxlength="proceed.cycs_already_posed.max_length" v-model="cycs_already_posed">
            <img src="/src/assets/icons/plus.png" @click="plus('cycs_already_posed')">
          </div>
        </div>
        <div class="cell">
          <div class="cell-text">活动已完成不再提醒：</div>
          <div class="cell-item">
            <img :src="`/src/assets/icons/circle${proceed.if_act_finished === 2 ? '-success' : ''}.png`" @click="circleCheck">
          </div>
        </div>
        <div class="footer">
          <mt-button @click.native="closePupup">取消</mt-button>
          <mt-button @click.native="updateProceed">完成</mt-button>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import Correction from '@/components/Correction'
  import {Toast} from 'Mint-ui'

  export default {
    name: 'ActivityDetail',
    components: {
      Correction
    },
    data () {
      return {
        info: {},
        acts: [],
        comments: [],
        commentCount: 0,
        proceed: {},
        cycs_already_posed: 0,
        in_cyc_already_posed: 0,
        popupVisible: false
      }
    },
    watch: {
      cycs_already_posed (val) {
        if (val >= this.proceed.cycs_already_posed.max_num) {
          this.cycs_already_posed = this.proceed.cycs_already_posed.max_num
        }
      },
      in_cyc_already_posed (val) {
        if (val >= this.proceed.in_cyc_already_posed.max_num) {
          this.in_cyc_already_posed = this.proceed.in_cyc_already_posed.max_num
        }
      }
    },
    methods: {
      getInfo () {
        const params = {act_id: this.$route.params.id}
        this.$post('/vue/activity/detail', params).then(data => {
          data.info.star = Number(data.info.star)
          this.info = data.info
          this.acts = data.acts
          this.comments = data.comment
          this.commentCount = data.comment_cnt
        })
      },
      showPopup () {
        this.popupVisible = true
        this.proceed_info()
      },
      closePupup () {
        this.popupVisible = false
      },
      showContent (key) {
        this.$refs.detail.parentNode.classList.remove('short')
      },
      hideContent () {
        let detail = this.$refs.detail
        if (detail !== undefined) {
          let height = this.$refs.detail.getBoundingClientRect().height
          if (height > 72) {
            detail.parentNode.classList.add('short')
          }
        }
      },
      addManage () {
        const params = {act_id: this.$route.params.id}
        this.$post('/vue/activity/add_to_manage', params).then(data => {
          this.info.if_attention = 1
        })
      },
      removeManage () {
        let params = {id: this.$route.params.id}
        this.$post('/vue/activity/remove_manage', params).then(data => {
          this.info.if_attention = 0
        })
      },
      routerToComment () {
        this.$router.push({name: 'ActivityComment', params: {id: this.$route.params.id}})
      },
      proceed_info () {
        const params = {id: this.$route.params.id}
        this.$post('/vue/activity/proceed_info', params).then(data => {
          this.proceed = data
          // 数字转换
          this.proceed.if_act_finished = Number(data.if_act_finished)
          if (Object.keys(this.proceed.cycs_already_posed).length > 0) {
            this.cycs_already_posed = Number(this.proceed.cycs_already_posed.num)
            this.proceed.cycs_already_posed.max_num = Number(this.proceed.cycs_already_posed.max_num)
            this.proceed.cycs_already_posed.max_length = this.proceed.cycs_already_posed.max_num.toString().length
          }
          if (Object.keys(this.proceed.in_cyc_already_posed).length > 0) {
            this.in_cyc_already_posed = Number(this.proceed.in_cyc_already_posed.num)
            this.proceed.in_cyc_already_posed.max_num = Number(this.proceed.in_cyc_already_posed.max_num)
            this.proceed.in_cyc_already_posed.max_length = this.proceed.in_cyc_already_posed.max_num.toString().length
          }
        })
      },
      circleCheck () {
        this.proceed.if_act_finished = this.proceed.if_act_finished === 2 ? 1 : 2
      },
      minus (field) {
        if (this[field] <= 0) {
          return false
        } else {
          this[field]--
        }
      },
      plus (field) {
        const max = this.proceed[field].max_num
        if (this[field] >= max) {
          return false
        } else {
          this[field]++
        }
      },
      updateProceed () {
        let params = {
          act_id: this.$route.params.id,
          cycs_already_posed: this.cycs_already_posed,
          in_cyc_already_posed: this.in_cyc_already_posed,
          if_act_finished: this.proceed.if_act_finished === 2 ? 'yes' : 'no'
        }
        this.$post('/vue/activity/update_proceed_info', params).then(data => {
          msg(data.proceed_info.join(','))
          this.closePupup()
        })
      },
      showCorrection () {
        this.$refs.correction.popShow1 = true
        this.$refs.correction.column = `活动ID${this.$route.params.id} - ${this.info.name}`
      }
    },
    mounted () {
      this.getInfo()
    },
    updated () {
      this.hideContent()
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-dark-blue: rgb(240, 244, 247);

  .activity-detail {
    height: calc(~'100vh - 56px');
    padding-bottom: 56px;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0;
    text-align: left;
    .flex {
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: space-between;
    }
    img {
      width: 24px;
      height: 24px;
    }
    .line {
      height: 8px;
      background-color: @c-dark-blue;
    }
    .card-item {
      padding: 12px;
      position: relative;
      // box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      &.is-new {
        background-image: url('/src/assets/icons/label-red.png');
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: left top;
      }
      .card-header {
        color: @c-124;
        font-size: 0;
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          height: 1px;
          content: '';
          transform: scaleY(.5);
          background-color: #f3f3f3;
        }
        img {
          width: 24px;
          height: 24px;
          margin-right: 4px;
          vertical-align: middle;
        }
        .title {
          display: inline-block;
          vertical-align: middle;
          font-weight: bold;
          font-size: 13px;
          line-height: 24px;
        }
        .v-line {
          width: 1px;
          height: 20px;
          background-color: @c-226;
          display: inline-block;
          vertical-align: middle;
          margin: 0 8px;
        }
      }
      .card-content {
        padding-top: 8px;
        font-size: 12px;
        line-height: 24px;
        color: @c-169;
        .hint {
          color: rgb(217, 117, 99);
        }
      }
    }
    .details {
      padding: 12px;
      text-align: left;
      .title {
        font-size: 13px;
        line-height: 24px;
        font-weight: bold;
        color: @c-124;
        .stars {
          float: right;
          line-height: 0;
          img {
            width: 24px;
          height: 24px;
          }
        }
      }
      .content {
        margin-top: 8px;
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        table {
          width: 100%!important;
        }
        img {
          width: 100%!important;
          height: auto;
        }
      }
      .looking-more {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 0;
        padding: 12px 0;
        display: none;
        .text {
          font-size: 12px;
          line-height:24px;
          color: rgb(108, 184, 222);
          display: inline-block;
          vertical-align: middle;
        }
        .icon {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      &.short {
        .content {
          height: 72px;
          padding-bottom: 0;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .looking-more {
          display: block;
          position: relative;
        } 
      }
    }
    .gray-hint {
      font-size: 12px;
      line-height: 20px;
      color: @c-169;
      text-align: center;
      padding: 8px 0;
      background-color: @c-246;
    }
    .dispute {
      display: block;
      width: 120px;
      height: 32px;
      margin: 16px auto;
      font-size: 13px;
      line-height: 24px;
      color: rgb(169, 169, 169);
      border-color: rgb(226, 226, 226);
      border-radius: 16px;
      background-color: #FFF;
    }
    .ac-area {
      margin: 0 12px;
      border-radius: 8px;
      background-color: @c-dark-blue;
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: space-between;
      .section {
        flex: 1;
        color: @c-blue;
        text-align: center;
        .top {
          width: 84%;
          margin: 4px auto 0;
          font-size: 16px;
          line-height: 32px;
          font-weight: bold;
          display: block;
          border-bottom: 1px solid @c-blue;
        }
        .bottom {
          font-size: 14px;
          line-height: 20px;
          display: block;
          margin-top: 4px;
        }
      }
      .go-right {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        margin: 12px;
        border: 1px solid @c-blue;
        border-radius: 100%;
        box-shadow: 0 0 4px 0 rgb(121, 154, 170);
        box-sizing: border-box;
      }
    }
    .comment {
      margin: 12px 0 0 12px;
      border-bottom: 1px solid @c-235;
      display: flex;
      justify-content: space-between;
      .head-img {
        flex: 0 0 auto;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          border-radius: 100%;
        }
      }
      .comment-detail {
        flex: 1;
        text-align: left;
        padding: 0 12px 12px 0;
        .user-name {
          font-size: 13px;
          font-weight: bold;
          color: @c-124;
          margin-bottom: 12px;
          .date-time {
            float: right;
            font-size: 12px;
            font-weight: normal;
            color: @c-169;
          }
        }
        .detail {
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
    .btn-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #FFF;
      box-sizing: border-box;
      border-top: 1px solid @c-226;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.no-collect {
        .mint-button:first-child {
          border-color: @c-red;
          background-color: #FFF;
          color: @c-red;
          display: block;
          margin: 8px auto;
          border: 1px solid @c-red;
        }
        .trash {
          display: block;
        }
      }
      &.collect {
        .mint-button:nth-child(2), .mint-button:nth-child(3) {
          display: block;
          flex: 0 0 auto;
        }
        .mint-button:nth-child(2) {
          border-color: @c-red;
          background-color: @c-red;
          color: #FFF;
          border: 1px solid @c-red;
        }
        .mint-button:nth-child(3) {
          border-color: @c-blue;
          background-color: @c-blue;
          color: #FFF;
          border: 1px solid @c-blue;
        }
        .icon {
          background-image: url('/src/assets/icons/heart-white.png');
        }
      }
      &.trash-out {
        .mint-button:nth-child(4) {
          display: block;
          color: @c-124;
          border: 1px solid @c-169;
          margin: 8px auto;
        }
      }
      .mint-button {
        width: 136px;
        height: 40px;
        font-size: 13px;
        font-weight: bold;
        line-height: 24px;
        color: #FFF;
        margin: 8px 26px;
        border-radius: 20px;
        display: none;
        .mint-button-icon {
          line-height: 0;
          vertical-align: middle;
        }
        .mint-button-text {
          vertical-align: middle;
        }
      }
      .trash {
        position: absolute;
        right: 0;
        top: 0;
        margin: 16px;
        display: none;
      }
    }
    .update-proceed-info {
      margin: auto;
      width: 80vw;
      height: auto;
      overflow: hidden;
      left: 0;
      color: @c-124;
      border-radius: 8px;
      .header {
        width: 100%;
        font-size: 13px;
        line-height: 36px;
        background-color: @c-235;
        text-align: center;
      }
      .footer {
        &:extend(.activity-detail .flex);
        .mint-button {
          height: 40px;
          flex: 1;
          font-size: 13px;
          line-height: 24px;
          border-radius: 0;
          &:nth-child(2) {
            color: @c-blue;
          }
          &:not(.is-disabled):active::after {
              opacity: .1;
          }
        }
      }
      .cell {
        padding: 12px;
        border-top: 1px solid @c-235;
        &:extend(.activity-detail .flex);
        .cell-text {
          font-size: 12px;
          line-height: 24px;
          flex: 1;
        }
        .cell-item {
          line-height: 0;
          flex: 0;
          &.input {
            &:extend(.activity-detail .flex);
            border: 1px solid @c-235;
            border-radius: 4px;
            img {
              flex: 1;
            }
            input {
              width: 60px;
              border: 0;
              border-left: 1px solid @c-235;
              border-right: 1px solid @c-235;
              flex: 1;
              font-size: 12px;
              line-height: 24px;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>